<template>
      <ContentBase>
    <div class="row">
      <div class="col-3">
        <UserProfileInfo @follow="follow" @unfollow="unfollow" :user="user" /> <!-- follow函数触发调用follow函数，反之调用unfollow函数 -->
        <UserProfileWrite v-if="is_me" @post_a_post="post_a_post" @delete_a_post="delete_a_post" />
      </div>
      <div class="col-9">
        <UserProfilePost :user="user" :posts="posts"  @delete_a_post="delete_a_post"/>
      </div>
    </div>
  </ContentBase>
   </template>
   
   <script>
import UserProfileInfo from '@/components/UserProfileInfo.vue';
import UserProfilePost from '@/components/UserProfilePosts.vue';
import UserProfileWrite from '@/components/UserProfileWrite.vue';
import ContentBase from '@/components/ContentBase.vue';
import { reactive } from 'vue';
import { useRoute } from 'vue-router';
import $ from "jquery";
import { useStore } from 'vuex';
import { computed } from 'vue';
   
   export default {
     name: 'UserProfileView',
     components: {
      ContentBase,
      UserProfileInfo,
      UserProfilePost,
      UserProfileWrite,
  },
      setup(){
        const store = useStore();
        const route = useRoute();
        const userId = parseInt(route.params.userId);

        const user = reactive({
          
        });

        const posts = reactive({ // 帖子列表
         
        })

        $.ajax({
          url:"https://app165.acapp.acwing.com.cn/myspace/getinfo/",
          type: "GET",
          data: { // 通过userID选择用户
            user_id: userId,
          },

          headers: {
            'Authorization' : "Bearer " + store.state.user.access,
          },

          success(resp) {
            user.id = resp.id;
            user.username = resp.username;
            user.photo = resp.photo;
            user.followerCount = resp.followerCount;
            user.is_followed = resp.is_followed;
          }
        });

        $.ajax({ // 获取某个用户的所有帖子
          url: "https://app165.acapp.acwing.com.cn/myspace/post/",
          type: "GET",
          data: {
            user_id: userId,
          },
          headers: {
            'Authorization' : "Bearer " + store.state.user.access,
          },
          success(resp) {
            posts.count = resp.length;
            posts.posts = resp;
          }
        })

        const follow = () => { // 组件的值只能在父组件中修改
          if (user.is_followed) return ;
          user.is_followed = true;
          user.followerCount ++ ;
        };

        const unfollow = () => {
          if (!user.is_followed) return ;
          user.is_followed = false;
          user.followerCount -- ;
        } 

        const post_a_post = (content) => {
          posts.count ++ ;
          posts.posts.unshift({ // 在最前面添加一个元素
            id: posts.count,
            userId: 1,
            content: content,
          })
        };

        const delete_a_post = post_id => {
          posts.posts = posts.posts.filter(post => post.id !== post_id); // 遍历post，当post.id !== post_id保留
          posts.count = posts.posts.length;
        }

        const is_me = computed (() => userId === store.state.user.id) 

      return {//将来在其他地方可能用到的值需要return出去
        user,
        follow,
        unfollow,
        posts,
        post_a_post,
        is_me,
        delete_a_post,
      }
      }
   }
   </script>
   
   <style scoped>
 
   </style>